본문으로 건너뛰기

State로 상태 관리

React에서는 애플리케이션의 상태(state)를 관리하는 것이 매우 중요합니다. 상태는 컴포넌트의 데이터를 관리하며, 사용자 인터페이스(UI)를 동적으로 업데이트하는 역할을 합니다. 여기서는 상태(state)를 정의하고 관리하는 방법, 그리고 주의할 점에 대해 알아보겠습니다.

상태(State)란 무엇인가요?​

상태는 컴포넌트 내부에서 관리되는 데이터입니다. 상태가 변경되면 해당 상태를 사용하는 컴포넌트가 다시 렌더링됩니다. React에서 상태를 사용하려면 useState라는 훅(hook)을 사용합니다.

useState 사용법​

useState 훅은 배열을 반환하는데, 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다. useState를 사용하여 상태를 선언하고 관리하는 예시를 보겠습니다.

import React, { useState } from 'react';

function Counter() {
  // 상태 변수와 상태 업데이트 함수를 선언합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

export default Counter;

위 예시에서 useState(0)은 count의 초기값을 0으로 설정하고, setCount 함수를 통해 상태를 업데이트할 수 있게 합니다. 버튼을 클릭하면 setCount 함수가 호출되어 상태 값이 변경되고, 컴포넌트가 다시 렌더링됩니다.

상태 관리의 핵심 개념​

1. 상태는 불변해야 합니다.​

상태를 직접 수정하지 않고, 항상 setState 함수(여기서는 setCount)를 통해 상태를 업데이트해야 합니다. 이는 React의 상태 관리 규칙을 따르는 것이며, 상태 변경에 대한 예측 가능성을 높여줍니다.

2. 상태는 최소한으로 유지해야 합니다.​

상태는 꼭 필요한 정보만 포함해야 합니다. 불필요한 상태를 많이 두면 관리하기 어려워지고, 성능에도 영향을 미칠 수 있습니다.

3. 상태 업데이트는 비동기적으로 처리됩니다.​

React의 상태 업데이트는 비동기적으로 처리되므로, 상태 변경 직후에 상태 값을 읽으면 기대한 값이 아닐 수 있습니다. 이를 고려하여 코드를 작성해야 합니다.

상태를 사용할 때 주의할 점​

  1. 상태 병합이 자동으로 이루어지지 않습니다. 상태가 객체일 때, 업데이트할 때마다 기존 상태를 복사해서 새로운 객체를 만들어야 합니다.
  2. 상태가 변경될 때마다 렌더링이 발생합니다. 불필요한 상태 변경을 최소화하여 렌더링 성능을 최적화해야 합니다.
  3. 비동기적인 상태 업데이트에 유의해야 합니다. 상태 업데이트 함수가 호출된 직후에 상태를 읽으면 이전 상태가 반환될 수 있습니다.

상태 관리 예시​

아래는 여러 개의 상태를 관리하는 예시입니다. 두 개의 상태를 사용하여 각각의 값을 업데이트하고 관리하는 방법을 보여줍니다.

import React, { useState } from 'react';

function UserProfile() {
  const [name, setName] = useState('John Doe');
  const [age, setAge] = useState(25);

  return (
    <div>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
      <button onClick={() => setName('Jane Smith')}>이름 변경</button>
      <button onClick={() => setAge(age + 1)}>나이 증가</button>
    </div>
  );
}

export default UserProfile;

더 알아보기​

  • 상태 불변성: 상태를 변경할 때 불변성을 유지하는 방법에 대해 더 알아보세요.
  • useState 사용법: 공식 문서에서 useState에 대한 자세한 정보를 확인하세요.
  • 상태 최적화: 상태 관리를 최적화하는 다양한 기법들에 대해 학습해보세요.

내용 요약과 다음 주제​

이번 주제에서는 React에서 상태(state)를 관리하는 방법과 주의할 점에 대해 알아보았습니다. 상태는 컴포넌트의 데이터를 관리하며, useState 훅을 사용하여 선언하고 업데이트할 수 있습니다. 다음 주제인 컴포넌트 이벤트 처리에서는 컴포넌트 내에서 사용자 인터랙션을 처리하는 방법에 대해 살펴보겠습니다.